<script setup>
import { getbusinessData, getoverviewOrders, getoverviewSnacks, getoverviewSetmeals } from '@/api/work.js'
import { useRouter } from 'vue-router'

import { onMounted, ref } from 'vue'

const router = useRouter()

const turnover = ref(0) //营业额
const validOrderCount = ref(0) //有效订单
const orderCompletionRate = ref(0) //订单完成率
const unitPrice = ref(0) //平均客单价
const newUsers = ref(0) //新增用户

const waitingOrders = ref(0) //待接单数量
const deliveredOrders = ref(0) //待派送数量
const completedOrders = ref(0) //已完成数量
const cancelledOrders = ref(0) //已取消数量
const allOrders = ref(0) //全部订单

const sold = ref(0) // 已启售数量
const discontinued = ref(0) // 已停售数量

const soldSetmeals = ref(0) // 已启售数量套餐
const discontinuedSetmeals = ref(0) // 已停售数量套餐

const newTime = ref(new Date())

// 获取年份、月份和日期
const year = newTime.value.getFullYear()
const month = String(newTime.value.getMonth() + 1).padStart(2, '0') // 月份需要加1，且补零处理
const day = String(newTime.value.getDate()).padStart(2, '0') // 日期补零处理

// 组合成 "yyyy-MM-dd" 格式
const formattedTime = `${year}-${month}-${day}`

onMounted(() => {
  getBdata()
  getOoder()
  getSnacks()
  getSetmeals()
})

//工作台
const getBdata = async () => {
  const res = await getbusinessData()
  console.log('工作：', res.data)
  if (res.data.code === 1) {
    turnover.value = res.data.data.turnover
    validOrderCount.value = res.data.data.validOrderCount
    orderCompletionRate.value = res.data.data.orderCompletionRate
    unitPrice.value = res.data.data.unitPrice
    newUsers.value = res.data.data.newUsers
  }
}

//订单
const getOoder = async () => {
  const res = await getoverviewOrders()
  console.log('订单：', res.data)
  if (res.data.code === 1) {
    waitingOrders.value = res.data.data.waitingOrders
    deliveredOrders.value = res.data.data.deliveredOrders
    completedOrders.value = res.data.data.completedOrders
    cancelledOrders.value = res.data.data.cancelledOrders
    allOrders.value == res.data.data.allOrders
  }
}

//零食
const getSnacks = async () => {
  const res = await getoverviewSnacks()
  console.log('零食', res.data)
  if (res.data.code === 1) {
    sold.value = res.data.data.sold
    discontinued.value = res.data.data.discontinued
  }
}
//套餐

const getSetmeals = async () => {
  const res = await getoverviewSetmeals()
  console.log('套餐：', res.data)
  if (res.data.code === 1) {
    soldSetmeals.value = res.data.data.sold
    discontinuedSetmeals.value = res.data.data.discontinued
  }
}
</script>

<template>
  <div class="container">
    <div class="header">
      <span>今日数据 : {{ formattedTime }}</span>
      <span style="  cursor: default; color: #000; background-color: aqua;" @click="router.push({ path: '/statistics'})">详情 > </span>
    </div>
    <div class="data-section">
      <div class="data-item"><span>营业额</span><span class="spantext">￥{{turnover }}</span></div>
      <div class="data-item"><span>有效订单</span><span class="spantext">￥{{ validOrderCount }}</span></div>
      <div class="data-item"><span>订单完成率</span><span class="spantext">￥{{ (orderCompletionRate * 100).toFixed(2) }}%</span></div>
      <div class="data-item"><span>平均客单价</span><span class="spantext">￥{{unitPrice }}</span></div>
      <div class="data-item"><span>新增用户</span><span class="spantext">{{newUsers}}个</span></div>
    </div>
  </div>

  <div class="container">
    <div class="header">
      <span>订单管理: {{ formattedTime }}</span>
      <span style="  cursor: default; color: #000; background-color: rgb(0, 255, 123);" @click="router.push({ path: '/order'})">详情</span>
    </div>
    <div class="data-section">
      <div class="order-item"><span>待接单数量</span><span class="spanOreder">{{ waitingOrders }}</span></div>
      <div class="order-item"><span>待派送数量</span><span class="spanOreder">{{ deliveredOrders }}</span></div>
      <div class="order-item"><span>已完成数量</span><span>{{ completedOrders }}</span></div>
      <div class="order-item"><span>已取消数量</span><span>{{ cancelledOrders }}</span></div>
      <div class="order-item"><span>全部订单</span><span>{{ allOrders }}</span></div>
    </div>
  </div>

  <div class="snacks-container ">
    <div class="left">
      <div class="header">
        <span>零食总览</span>
        <span style="cursor: default; color: #000; background-color: rgb(0, 191, 255);" @click="router.push({ path: '/snacks'})">详情</span>
      </div>
      <div class="data-section">
        <div class="order-item"><span>已启售</span><span>{{sold}}</span></div>
        <div class="order-item"><span>已停售</span><span>{{discontinued}}</span></div>
      </div>
    </div>
    <div class="left">
      <div class="header">
        <span>套餐总览</span>
        <span style="cursor: default; color: #000; background-color: rgb(255, 0, 38);" @click="router.push({ path: '/setmeal'})">详情</span>
      </div>
      <div class="data-section">
        <div class="order-item"><span>已启售</span><span>{{ soldSetmeals }}</span></div>
        <div class="order-item"><span>已停售</span><span>{{discontinuedSetmeals}}</span></div>
      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.data-section {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.data-item {
  width: 200px; /* 根据需要调整宽度 */
  height: 70px;
  text-align: center;
  background-color: rgb(226, 202, 173);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  span {
    margin-top: 10px; /* 调整垂直间距 */
  }
}

.order-item {
  width: 200px; /* 根据需要调整宽度 */
  height: 70px;
  text-align: center;
  background-color: rgb(226, 202, 173);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spantext {
  font-size: 18px;
}

.spanOreder {
  font-size: 18px;
  color: #ca2d2d;
}

.snacks-container {
  display: flex;
  justify-content: space-between;

  .left {
    background-color: #fff;
    padding: 10px;
    width: 100%;
    margin: 10px;
  }
}
</style>